<template>
   <div class="tag-type dib ml10">
     <div class="tag-type-point dib" :style="extStyle"></div>
     <span :style="textColor">{{text}}</span>
   </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
export default {
  //  匹配标签状态及颜色
  name: 'TagType',
  components: {},
  mixins: [tableMixin],
  props: {
    value: {
      type: [String, Number],
      default: '0'
    },
    msg: String,
    color: String

  },
  data () {
    return {
      // "已通过""3" // "被驳回""2" // "审批中""1" // "已撤销""4" // "未提交""0"
      map: {
        '0': { color: '#909399', msg: '未提交' },
        '1': { color: '#409EFF', msg: '审批中' },
        '2': { color: '#E6A23C', msg: '被驳回' },
        '3': { color: '#67C23A', msg: '已通过' },
        '4': { color: '#F56C6C', msg: '已撤销' }
      }
    }
  },
  computed: {
    status () {
      return this.value + ''
    },
    bgColor () {
      if (this.color) { return this.color }
      return this.getItem().color || '#666'
    },
    text () {
      if (this.msg) { return this.msg }
      return this.getItem().msg || '未提交'
    },
    // 圆点背景色
    extStyle () {
      return {
        'background-color': this.bgColor
      }
    },
    // 文本颜色
    textColor () {
      return {
        'color': this.bgColor
      }
    }

  },
  watch: {},
  created () {
  },
  methods: {
    getItem () {
      let item = this.map[this.status] || {}
      return item
    }
  }
}
</script>

<style scoped lang='scss'>
.tag-type{
  &-point{
    width:10px;
    height:10px;
    border-radius: 50%;
  }
}

</style>
